<template>
	<view class="main">
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text>01: 核心技能（CORE SKILLS ）
			</view>
		</view>
		<view class="cu-card dynamic" :class="isCard?'no-card':''">
			<view class="cu-item shadow padding-lg">
				<view class="grid padding-lr justify-center">
					<image src="cloud://first-xlfs5.6669-first-xlfs5-1302491884/home/web/web_base2.png" mode="aspectFit"></image>
				</view>
				<view>
					首先，无论学任何一个技术，都是从零基础开始的，前端开发也是一样。
					前端开发的基础语法，由三剑客HTML+CSS+JavaScript组成，这是前端开发最基本的3个语言。
				</view>
				<view>
					<text class="text-bold text-shadow">HTML：</text>
					<li>编写页面结构</li>
					<text class="text-bold text-shadow">CSS：</text>
					<li>基本语法、选择器和格式化排版、盒模型的高级用法、常用布局模型</li>
					<text class="text-bold text-shadow">JavaScript：</text>
					<li>事件、交互、数据处理，基础语法、ES新规范</li>
					<text class="text-bold text-shadow">网络基础：</text>
					<li>域名、服务器、HTTP协议</li>
				</view>
				<view></view>
			</view>
		</view>
		
		<view class="cu-bar bg-white solid">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text>02: 进阶技能（INTER SKILLS ）
			</view>
		</view>
		<view class="cu-card dynamic" :class="isCard?'no-card':''">
			<view class="cu-item shadow padding-lg">
				<view class="grid padding-lr justify-center">
					<image src="cloud://first-xlfs5.6669-first-xlfs5-1302491884/home/web/frameworks.png" mode="aspectFit"></image>
				</view>
				<view>
					<text class="text-bold text-shadow">响应式布局：</text>
					<li>编写页面结构</li>
					<text class="text-bold text-shadow">兼容性调整：</text>
					<li>浏览器之间的兼容性</li>
					<text class="text-bold text-shadow">UI框架：</text>
					<li>Bootstrap、Semantic、Layui等</li>
					<text class="text-bold text-shadow">SEO：</text>
					<li>合理的title、description、keywords、语义化的HTML代码、图片加alt</li>
					<text class="text-bold text-shadow">Node、npm/yarn</text>
					<li>包管理工具</li>
					<text class="text-bold text-shadow">CSS预编译工具</text>
					<li>SASS、LESS</li>
					<text class="text-bold text-shadow">自动化工具</text>
					<li>Grunt、Gulp，自定义项目结构</li>
					<text class="text-bold text-shadow">前端三大框架</text>
					<li>React、Vue、Angluar以及对应的UI框架Element、Ant Design等，一般工作中只用到其中1个。</li>
					<text class="text-bold text-shadow">模块化CSS</text>
					<li>CSS Madules、style-components</li>				
					<text class="text-bold text-shadow">工程化工具（打包工具）</text>
					<li>Webpack、Parcel，打包成一个单一的JS或者CSS文件，也可以按需打包</li>
					<text class="text-bold text-shadow">测试工具</text>
					<li>Jest、Enzyme</li>
				</view>
				<view></view>
			</view>
		</view>
		
		<view class="cu-bar bg-white solid">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text>03: 高级技能（ADV SKILLS ）
			</view>
		</view>
		<view class="cu-card dynamic" :class="isCard?'no-card':''">
			<view class="cu-item shadow padding-lg">
				<view class="grid padding-lr justify-center">
					<image src="cloud://first-xlfs5.6669-first-xlfs5-1302491884/home/web/web_devices.png" mode="aspectFit"></image>
				</view>
				<view>
					<text class="text-bold text-shadow">Typescript</text>
					<li>JavaScript的超集</li>
					<text class="text-bold text-shadow">移动开发：</text>
					<li>React Native、Taro、Uni-APP</li>
					<text class="text-bold text-shadow">桌面开发：</text>
					<li>Electorn、Proton Native</li>
					<text class="text-bold text-shadow">静态网站生成器：</text>
					<li>Hexo、Gatsby、Docusaurus</li>
					<text class="text-bold text-shadow">SSR（服务端渲染）</text>
					<li>Next.js、Nuxt.js</li>
					<text class="text-bold text-shadow">GraphQL</text>
					<li>一种用于 API 的查询语言</li>
					<text class="text-bold text-shadow">性能优化</text>
					<li>提高页面第一次加载的时间、动画执行的效率、事件响应的效率、DNS缓存、图片懒加载等</li>
					<text class="text-bold text-shadow">安全</text>
					<li>跨域资源共享、CORS、跨站脚本漏洞(XSS)</li>
				</view>
				<view></view>
			</view>
		</view>
		
		<view class="cu-bar bg-white solid">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text>04: 工作与团队技能（TEAM SKILLS ）
			</view>
		</view>
		<view class="cu-card dynamic" :class="isCard?'no-card':''">
			<view class="cu-item shadow padding-lg">
				<view class="grid padding-lr justify-center">
					<image src="cloud://first-xlfs5.6669-first-xlfs5-1302491884/home/web/team.png" mode="aspectFit"></image>
				</view>
				<view>
					<text class="text-bold text-shadow">Git & Github</text>
					<li>Git是分布式代码协作工具，Github是Git的一个远程仓库</li>
					<text class="text-bold text-shadow">Docker</text>
					<li>新的虚拟化技术，介于虚拟机和操作系统之间，暂用资源少，并且能自动化管理运行环境和集群</li>
					<text class="text-bold text-shadow">CI</text>
					<li>持续集成(Continuous integration,简称CI)，一般是运维来维护</li>
					<text class="text-bold text-shadow">ESLint/Prettier</text>
					<li>代码规范</li>
				</view>
				<view></view>
			</view>
		</view>
		
		<view class="cu-bar bg-white solid">
			<view class="action">
				<text class="cuIcon-titles text-orange"></text>05: 持续进步
			</view>
		</view>
		<view class="cu-card dynamic" :class="isCard?'no-card':''">
			<view class="cu-item shadow padding-lg">
				<view class="grid padding-lr justify-center">
					<image src="cloud://first-xlfs5.6669-first-xlfs5-1302491884/home/web/progress.png" mode="aspectFit"></image>
				</view>
				<view>
					<text class="text-bold text-shadow">设计模式、组件设计原则、代码结构</text>
					<li>推荐一本书《JavaScript设计模式》</li>
					<text class="text-bold text-shadow">精进技能，关注新闻，学好英语</text>
					<li>前端技术发展很快，多关注大佬的微博或博客，学好英语以便以查阅英文文档</li>
				</view>
				<view></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCard: true
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>

</style>
